.flexbox #flexbox1{
    cursor: pointer;
    margin-top: 20px;
    display: -ms-flexbox;
    width: 188%;
    -ms-flex-pack:distribute;
    border: 1px solid gray;
}

.flexbox #flexbox1 > div{ min-width: 80px;min-height: 80px;}
.flexbox #flexbox1 > div:nth-child(1){background-color: #f00;}
.flexbox #flexbox1 > div:nth-child(2){background-color:#0ff;}
.flexbox #flexbox1 > div:nth-child(3){background-color: #0094ff;}

body{
    background-color: #00ff90;
}

.box {
        /* basic styling */
        width: 350px;
        height: 95px;
        border: 1px solid #555;
        font: 14px Arial;
      
        /* flexbox setup */
        display: -webkit-box;
        -webkit-box-orient: horizontal;
      
        display: -moz-box;
        -moz-box-orient: horizontal;
      
        display: box;
        box-orient: horizontal;
      }
      
      .box > div {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
      
        -moz-transition: width 0.7s ease-out;
        -o-transition: width 0.7s ease-out;
        -webkit-transition: width 0.7s ease-out;
        transition: width 0.7s ease-out;
      }
      
      /* our colors */
      .box > div:nth-child(1){ background : #FCC; }
      .box > div:nth-child(2){ background : #CFC; }
      .box > div:nth-child(3){ background : #CCF; }
      
      .box > div:hover {
        width: 200px;
      }